<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
  <head>
    <title>Journal de bord inlive !</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" href="css/cscroll.css" />
  </head>
  <body>
      <div>
          <h4>Ajoutez un nouvel espace de travail</h4>
          <hr />
          <input type="text" id="dashboard.create.txt_name"/> <input type="button" value="Ajoutez le workspace" id="dashboard.create.submit"/>
      </div>
      <div>
          <h4>Choisir votre espace de travail</h4>
          <hr />
          <select id="dashboard.list"></select> <button id="dashboard.workspace.delete">Supprimer le Workspace</button><button id="dashboard.workspace.add_container">Ajouter le conteneur suivant: </button><input type="text" id="dashboard.workspace.add_container_text"/>
      </div>
      <div>
          <h4>Espace de travail <b><span id="dashboard.workspace.name"></span></b></h4>
          <hr />
          <div id="dashboard.workspace.list_containers">

          </div>
      </div>

			<div style="position: absolute; top: 0px; left: 0px; height:100%; width: 100%;" id="windows">
				<div id="win-workspace-addContainer" style="top: 300px; left: 0px; position: absolute; height: 224px; width: 300px; border: 1px solid black">
					<div id="win-title" style="width: 300px; height: 24px; background-color: blue">
						
						<div style="float: left; width: 250px" id="win-title-info">
							<img id="win-title-img" alt="icone"/>
							<span id="win-title-text">Titre de la fenêtre</span>
						</div>
						<div style="float: right; width: 50px" id="win-title-icons">icn</div>
					</div>
					<!--<div style="width: 300px; height: 200px;">
						<div style="width: 284px; height: 200px; float: left;  background-color: green; overflow-y: auto" id="win-contenu">
							<div style="height: 284px;">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac neque tortor. Phasellus eget dui eu felis luctus malesuada. Vestibulum faucibus, tellus vitae blandit molestie, orci ligula venenatis odio, fringilla fermentum nisi turpis id dolor. Curabitur sit amet est in erat rutrum feugiat quis at arcu. Suspendisse id nisl sed odio vehicula scelerisque nec nec est. Duis feugiat malesuada nisl, sit amet luctus augue euismod et. Sed at faucibus sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan cursus pretium.

								Nunc a neque nunc, sed semper libero. Sed lobortis nisl id orci ullamcorper vel elementum orci lacinia. Praesent eu nulla at mauris interdum ultricies vitae eu ante. Nam congue porta erat id sagittis. Nam molestie dui et tortor ullamcorper elementum. Curabitur nec nunc ultricies ante venenatis interdum eu sit amet dui. Etiam accumsan pulvinar libero et dictum. Quisque interdum mauris nec leo aliquet pellentesque. Praesent ultrices ultrices elit ac placerat. Cras pulvinar posuere erat, non sodales augue tristique nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eu turpis elit. Vestibulum ut sem sed purus porta lacinia.

								Donec congue neque nisi. Maecenas venenatis luctus tortor, et ullamcorper orci vulputate ac. Nunc posuere metus ligula. Integer commodo hendrerit dui eu placerat. Praesent a enim est, eget mattis velit. Duis hendrerit placerat mi, vel fringilla est dictum vel. Aliquam malesuada, lorem laoreet semper varius, ligula mi aliquet odio, quis ultrices lectus leo non urna. Maecenas odio sapien, aliquet eget malesuada vitae, ultrices in purus. Proin gravida ipsum ut ante accumsan imperdiet. Aliquam id ligula at est molestie varius vitae nec ante.

								Suspendisse bibendum, sem id rutrum egestas, arcu ante tincidunt sem, eget consectetur lectus metus eu ante. Nunc eu lorem porttitor nisl posuere accumsan et vitae risus. In velit diam, elementum vitae feugiat nec, lacinia at erat. Ut id nibh et diam eleifend egestas eget in lacus. Duis feugiat eleifend iaculis. Aenean ornare magna ac nisi rhoncus eu sagittis dui eleifend. Suspendisse potenti. Nam id faucibus mauris. Nunc dictum ullamcorper lacus at semper.

								Quisque malesuada scelerisque lacinia. Pellentesque rutrum ullamcorper dui sed suscipit. Vivamus quis purus eu ante aliquet porttitor. Sed suscipit sodales augue eu semper. Pellentesque vitae nisi sed ipsum pulvinar tempus vel ac eros. Etiam et justo justo, at semper elit. Maecenas fringilla faucibus varius. Vestibulum id dui eget odio lacinia volutpat eu non erat. Integer ut ipsum quam, et varius tellus. Curabitur ullamcorper accumsan massa, sit amet aliquet neque pellentesque ut. Suspendisse dapibus dapibus lectus at porta. Curabitur nec iaculis libero.
							</div>
						</div>
						<div style="width: 16px; float: right; height:200px; background-color: red; ">
							<div style="height: 16px; background-color: #999999" onclick="return scrollup()" onmousedown="return false">&nbsp;</div>
							<div style="height: 168px; background-color: #222222">
								<div style="height: 20px; position: relative; background-color: #444444" id="win-scroll-bar">
									&nbsp;
								</div>
							</div>
							<div style="height: 16px; background-color: #999999" onclick="return scrolldown()" onmousedown="return false">&nbsp;</div>
						</div>

					</div>-->
						<div style="height: 200px; float: left;  background-color: green; overflow-y: auto" id="win-contenu">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac neque tortor. Phasellus eget dui eu felis luctus malesuada. Vestibulum faucibus, tellus vitae blandit molestie, orci ligula venenatis odio, fringilla fermentum nisi turpis id dolor. Curabitur sit amet est in erat rutrum feugiat quis at arcu. Suspendisse id nisl sed odio vehicula scelerisque nec nec est. Duis feugiat malesuada nisl, sit amet luctus augue euismod et. Sed at faucibus sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan cursus pretium.

								Nunc a neque nunc, sed semper libero. Sed lobortis nisl id orci ullamcorper vel elementum orci lacinia. Praesent eu nulla at mauris interdum ultricies vitae eu ante. Nam congue porta erat id sagittis. Nam molestie dui et tortor ullamcorper elementum. Curabitur nec nunc ultricies ante venenatis interdum eu sit amet dui. Etiam accumsan pulvinar libero et dictum. Quisque interdum mauris nec leo aliquet pellentesque. Praesent ultrices ultrices elit ac placerat. Cras pulvinar posuere erat, non sodales augue tristique nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eu turpis elit. Vestibulum ut sem sed purus porta lacinia.

								Donec congue neque nisi. Maecenas venenatis luctus tortor, et ullamcorper orci vulputate ac. Nunc posuere metus ligula. Integer commodo hendrerit dui eu placerat. Praesent a enim est, eget mattis velit. Duis hendrerit placerat mi, vel fringilla est dictum vel. Aliquam malesuada, lorem laoreet semper varius, ligula mi aliquet odio, quis ultrices lectus leo non urna. Maecenas odio sapien, aliquet eget malesuada vitae, ultrices in purus. Proin gravida ipsum ut ante accumsan imperdiet. Aliquam id ligula at est molestie varius vitae nec ante.

								Suspendisse bibendum, sem id rutrum egestas, arcu ante tincidunt sem, eget consectetur lectus metus eu ante. Nunc eu lorem porttitor nisl posuere accumsan et vitae risus. In velit diam, elementum vitae feugiat nec, lacinia at erat. Ut id nibh et diam eleifend egestas eget in lacus. Duis feugiat eleifend iaculis. Aenean ornare magna ac nisi rhoncus eu sagittis dui eleifend. Suspendisse potenti. Nam id faucibus mauris. Nunc dictum ullamcorper lacus at semper.

								Quisque malesuada scelerisque lacinia. Pellentesque rutrum ullamcorper dui sed suscipit. Vivamus quis purus eu ante aliquet porttitor. Sed suscipit sodales augue eu semper. Pellentesque vitae nisi sed ipsum pulvinar tempus vel ac eros. Etiam et justo justo, at semper elit. Maecenas fringilla faucibus varius. Vestibulum id dui eget odio lacinia volutpat eu non erat. Integer ut ipsum quam, et varius tellus. Curabitur ullamcorper accumsan massa, sit amet aliquet neque pellentesque ut. Suspendisse dapibus dapibus lectus at porta. Curabitur nec iaculis libero.
						</div>
					</div>
				</div>
			</div>
      <div id="template" style="display: none">
          <div id="template.container">
              <div id="container_#id" style="width: 300px">
                  <div id="container_#id_name" style="float: left; width: 200px">+ #name</div>
                  <div id="container_#id_actions" style="float: right;"> <a action="change" href="#">M</a> - <a action="add" href="#">A</a> - <a action="delete" href="#">D</a></div>
              </div>
          </div>
      </div>
      <script type="text/javascript" src="/Utils.js"></script>
      <script type="text/javascript" src="/String.js"></script>
      <script type="text/javascript" src="scripts/dashboard.js"></script>
			<script type="text/javascript">

				function CScroll(element, scrollcontainer, cssclass)
				{
					var _element;
					var _scrollcontainer;

					var _displayed;
					var _cssclass;

					var _elemscroll;
					var _elembarscroll;

					function createScroll()
					{
						var div = document.createElement("div");
						div.className = "cscroll";

						if (_cssclass)
							div.className += " "+_cssclass;

						var tbl = document.createElement("table");
						tbl.style.borderStyle = "none";
						tbl.style.height = "100%";
						tbl.style.width = "100%";
						
						var scrollup = document.createElement("div");
						scrollup.className = "cscroll-scrollup";
						scrollup.innerHTML = " ";
						tbl.insertRow(-1).insertCell(-1).appendChild(scrollup);
						tbl.rows[0].className = "cscroll-scrollup";
						
						var scrollmiddle = document.createElement("div");
						_elembarscroll = document.createElement("div");
						_elembarscroll.className = "cscroll-scrollbar"
						scrollmiddle.className = "cscroll-bg-scrollbar"
						scrollmiddle.appendChild(_elembarscroll);
						tbl.insertRow(-1).insertCell(-1).appendChild(scrollmiddle);

						var scrolldown = document.createElement("div")
						scrolldown.innerHTML = " ";
						scrolldown.className = "cscroll-scrolldown";
						tbl.insertRow(-1).insertCell(-1).appendChild(scrolldown);

						div.appendChild(tbl);

						_elemscroll = div;
					}

					function updateScroll()
					{

					}
					function checkElemScroll()
					{
						if (!_elemscroll)
							createScroll();
					}
					this.display = function()
					{
						checkElemScroll();
						console.log(_element);
						if (_element == _scrollcontainer)
						{
							var div = document.createElement("div");
							var container = _element.parentNode;
							container.removeChild(_element);
							div.appendChild(_element);

							div.style["float"] = "left";
							_elemscroll.style["float"] = "right";

							_element.style.overflow = "hidden";
							div.style.overflow = "hidden";
							container.appendChild(div);
							container.appendChild(_elemscroll);
							
							div.style.width = (container.offsetWidth - 18)+"px";
						}

					}

					function __construct(element, scrollcontainer, cssclass)
					{
						_element = element;
						console.log(_element);
						if (!scrollcontainer)
							scrollcontainer = element;

						_scrollcontainer = element;
						_displayed = false;
						_cssclass = cssclass;
					}

					__construct(element, scrollcontainer, cssclass);
				}


				function scrollup()
				{
					var contenu = document.getElementById("win-contenu");
					contenu.scrollTop -= 5;
					controlMaxMinScroll(contenu);
					refreshScrollBarPos();
					return false;
				}
				function scrolldown()
				{
					var contenu = document.getElementById("win-contenu");
					contenu.scrollTop += 5;
					controlMaxMinScroll(contenu);
					refreshScrollBarPos();
					return false;
				}

				function controlMaxMinScroll(elem)
				{
					if (elem.scrollTop < 0)
						elem.scrollTop = 0;

					if (elem.scrollTop > (elem.scrollHeight - elem.parentNode.offsetHeight))
						elem.scrollTop = elem.scrollHeight - elem.parentNode.offsetHeight;
				}

				function refreshScrollBarPos()
				{
					var contenu = document.getElementById("win-contenu");
					var top = contenu.scrollTop;
					var height = contenu.scrollHeight;
					var trueheight = contenu.offsetHeight;
					var percent = (trueheight/height);
					var heightScrollBar = 168*percent;
					var heightEmpty = 168 - heightScrollBar;

					var convertPx = heightEmpty/(height-trueheight);

					var topScroll = convertPx*top;

					var bar = document.getElementById("win-scroll-bar")
					bar.style.top = topScroll+"px";

					console.log("currentScroll: "+top)
				}

				function makeDraggable(elem, elemMoved, cursor)
				{
					if (cursor)
						elem.dragCustomCursor = cursor;
					if (!elemMoved)
						elemMoved = elem;

					elem.dragMoveElement = elemMoved;

					elem.onmousedown = function(e)
					{
						this.drag = true;
						if (this.customCursor)
							this.style.cursor = this.customCursor;
						document.currentDragElement = this;
						this.mouseOriginX = e.x;
						this.mouseOriginY = e.y;
						console.log(e);
						return false;
					}
					document.onmouseup = function()
					{
						var dragElem = document.currentDragElement;
						if (dragElem)
							dragElem.drag = false;
					}

					document.onmousemove = function(e)
					{
						var dragElem = document.currentDragElement;
						if (dragElem && dragElem.drag)
						{
							var height = dragElem.dragMoveElement.offsetHeight;
							var maxtop = dragElem.dragMoveElement.parentNode.offsetHeight - height;
							var width = dragElem.dragMoveElement.offsetWidth;
							var maxleft = dragElem.dragMoveElement.parentNode.offsetWidth - width;

							console.log("height: "+height+" - maxtop: "+maxtop+" - width: "+width+" - maxleft: "+maxleft)

							var presentTop = parseFloat(dragElem.dragMoveElement.style.top) || 0
							var presentLeft = parseFloat(dragElem.dragMoveElement.style.left) || 0

							var diffX = (e.x - dragElem.mouseOriginX);
							var diffY = (e.y - dragElem.mouseOriginY);

							var newleft = presentLeft + diffX
							var newtop = presentTop + diffY

							if (newtop < 0)
								newtop = 0;
							else if (newtop > maxtop)
								newtop = maxtop;

							if (newleft < 0)
								newleft = 0;
							else if (newleft > maxleft)
								newleft = maxleft;
							console.log("top: "+newtop+" - left: "+newleft)
							var diffLeft = newleft - presentLeft;
							var diffTop = newtop - presentTop;
							if (presentTop != newtop)
							{
								dragElem.presentTop = newtop;
								dragElem.dragMoveElement.style.top = newtop+"px";
							}
							if (presentLeft != newleft)
							{
								dragElem.presentLeft = newleft;
								dragElem.dragMoveElement.style.left = newleft+"px";
							}

							dragElem.mouseOriginX = e.x;
							dragElem.mouseOriginY = e.y;

							if (typeof(dragElem.ondrag) == "function")
								dragElem.ondrag({left: diffLeft, top: diffTop});
						}
					}
				}

				function refreshScrollBar()
				{
					var contenu = document.getElementById("win-contenu");
					var height = contenu.scrollHeight;
					var trueheight = contenu.offsetHeight;
					var percent = (trueheight/height);
					var heightScrollBar = 168*percent;
					var heightEmpty = 168 - heightScrollBar;

					var convertPx = (height-trueheight)/heightEmpty;

					console.log(height+":"+heightScrollBar+":"+heightEmpty+":"+convertPx+":"+(200+(convertPx*heightEmpty)))

					var bar = document.getElementById("win-scroll-bar");
					bar.style.height = heightScrollBar+"px";
					bar.convertPx = convertPx;
					bar.elemScrolled = contenu;
					makeDraggable(bar);
					bar.ondrag = function(e)
					{
						var diffscroll = e.top*this.convertPx;
						this.elemScrolled.scrollTop += diffscroll;
						refreshScrollBarPos();
						console.log(this.style.top)
						if (this.style.top == "0px")
							this.elemScrolled.scrollTop = 0;
						controlMaxMinScroll(this.elemScrolled);
					}
				}
			</script>
  </body>
</html>